<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<div th:replace="fragment/js::js"></div>
<style>
    /*修改layui表格的高度*/
    .layui-table-cell {
        height: auto;
    }
</style>
<body>
<h1>[[${goodsId}]]</h1>
<!--分页组件-->
<table id="goodsTable" lay-filter="goodsTable"></table>
<script type="text/html" id="addForm">
    <form class="layui-form" style="padding: 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" placeholder="请输入商品名称"
                       style="width: 200px" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品原价</label>
            <div class="layui-input-block">
                <input type="text" name="oldPrice" placeholder="请输入商品原价" lay-verify="number"
                       style="width: 200px" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品现价</label>
            <div class="layui-input-block">
                <input type="text" name="nowPrice" placeholder="请输入商品现价" lay-verify="number"
                       style="width: 200px" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品主图</label>
            <div class="layui-input-block">
                <input type="file" id="pic" name="pic" style="display: none">
                <div style="display: flex">
                    <div>
                        <img id="uploadImg"
                             style="width: 80px;height: 80px;border-radius: 10px;border: lightgray 1px dashed;"/>
                        <i class="layui-icon layui-icon-addition"
                           style="position: absolute;left: 35px;top: 35px;z-index: -1"></i>

                    </div>
                </div>

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否上架</label>
            <div class="layui-input-block">
                <input type="checkbox" name="onSale" lay-skin="switch">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="commit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="editForm">
    <form class="layui-form" style="padding: 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" id="title" placeholder="请输入商品名称"
                       style="width: 200px" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品原价</label>
            <div class="layui-input-block">
                <input type="text" name="oldPrice" id="oldPrice" placeholder="请输入商品原价" lay-verify="number"
                       style="width: 200px" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品现价</label>
            <div class="layui-input-block">
                <input type="text" name="nowPrice" id="nowPrice" placeholder="请输入商品现价" lay-verify="number"
                       style="width: 200px" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品主图</label>
            <div class="layui-input-block">
                <input type="file" id="editPic" name="pic" style="display: none">

                <div style="display: flex">
                    <div>
                        <img id="editUploadImg"
                             style="width: 80px;height: 80px;border-radius: 10px;border: lightgray 1px dashed;"/>
                        <i class="layui-icon layui-icon-addition"
                           style="position: absolute;left: 35px;top: 35px;z-index: -1"></i>

                    </div>
                </div>


            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否上架</label>
            <div class="layui-input-block">
                <input type="checkbox" name="onSale" id="onSale" lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="sureEdit" lay-submit lay-filter="sureEdit">确定修改</button>
            </div>
        </div>
    </form>
</script>


<script th:inline="javascript" type="text/javascript">
    layui.use(['layer', 'table', 'form'], function () {


        // 我再js代码里边如何获取控制器传递过来的参数呢？
        let layer = layui.layer;// 弹出层

        let goodsId = [[${goodsId}]];// 这么取获取,thymeleaf内联表达式


        let table = layui.table;// 分页组件
        let form = layui.form;// 分页组件
        let $ = layui.$;// 使用jquery

        // layer.msg('弹出一个消息', {icon: 1});

        //第一个实例
        let tb = table.render({// 渲染表格
            elem: '#goodsTable'
            , url: '/pages/back/goods/ajaxList' //服务后台的数据接口
            , page: true //开启分页
            , cols: [[ //表头，这里是两个[[开头，两个]]结尾
                {field: '', type: 'checkbox', title: '多选'}
                , {field: 'title', title: '商品名称', width: 160}
                , {
                    field: '', title: '商品图片', templet: function (d) {// 这个d指的是本行的数据 js对象
                        // console.log(d)
                        return '<div><img style="width: 50px;height: 50px" src=' + d.img + '/></div>'
                    }
                }
                , {field: 'oldPrice', title: '原价', width: 80, edit: 'text'}
                , {field: 'nowPrice', title: '现价', width: 80, sort: true, edit: 'text'}
                , {field: 'createTime', title: '创建时间', width: 160}
                , {field: 'updateTime', title: '更新时间', width: 160}
                , {field: 'userUser', title: '更新人', width: 160}
                , {field: 'sold', title: '已售数量', width: 160}
                , {field: 'score', title: '商品评分', width: 160}
                , {field: 'merchantId', title: '商户id', width: 160}
                , {
                    field: '', title: '操作', templet: function (d) {// 这个d指的是本行的数据 js对象
                        // console.log(d)
                        return '<div>\n' +
                            '            <button class="layui-btn layui-btn-xs " lay-event="updateData">修改</button>\n' +
                            '            <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteData">删除</button>\n' +
                            ' </div>'

                    }
                }
            ]]
            , toolbar: 'default'
        });
        let addOpen;
        let editOpen;

        form.on('submit(commit)', function (data) {
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            // $.post('/pages/back/shopCar/editCount', data.field, function (res) {
            //
            // });
            // 现在要讲的是如果表单中有 文件上传呢？而且还有基本数据
            // formData就是传递表单js对象,处理最复杂的表单

            // 如何自定义增加表单数据

            let formData = new FormData(data.form);
            // 添加一个文件呢？
            // 添加文件的步骤：首先，第一步：获取file的jsDom对象

            $.ajax({
                url: "/pages/back/goods/add",// 请求数据服务器地址，只能是当前项目，JSONP才能访问外网（需要服务器配合才能用）
                contentType: false,// 默认就是表单数据(不写)，如果此时要传递的是json字符串，
                // 那么此时就用application/json,如果此时要传递图片"multipart/form-data，还有数组，集合，还有对象，那么contentType必须指定为false
                data: formData,// 要上传的参数
                dataType: 'json',// 服务器响应数据：json,text,html,xml
                error: function () {//请求错误的时候，会触发此函数

                },
                processData: false,//布尔值,一般都不用设置，规定通过请求发送的数据是否转换为查询字符串。默认是 true。如果此时上传的时候，有图片，这里必须设置false,
                success: function (res) {// 请求成功，回调函数,data，指的就是服务器返回的数据
                    console.log(res);
                    if (res.res) {
                        layer.msg(res.msg);
                        tb.reload();// 添加成功数据之后要重载表格

                        if (addOpen != undefined) {
                            layer.close(addOpen);

                        }
                    }
                },
                type: 'post',// ajax请求的方式，post或get
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.on('submit(sureEdit)', function (data) {
            let formData = new FormData(data.form);
            formData.append("goodsId", $("#sureEdit")[0].goodsId);
            // 添加一个文件呢？
            // 添加文件的步骤：首先，第一步：获取file的jsDom对象
            $.ajax({
                url: "/pages/back/goods/edit",// 请求数据服务器地址，只能是当前项目，JSONP才能访问外网（需要服务器配合才能用）
                contentType: false,// 默认就是表单数据(不写)，如果此时要传递的是json字符串，
                // 那么此时就用application/json,如果此时要传递图片"multipart/form-data，还有数组，集合，还有对象，那么contentType必须指定为false
                data: formData,// 要上传的参数
                dataType: 'json',// 服务器响应数据：json,text,html,xml
                error: function () {//请求错误的时候，会触发此函数

                },
                processData: false,//布尔值,一般都不用设置，规定通过请求发送的数据是否转换为查询字符串。默认是 true。如果此时上传的时候，有图片，这里必须设置false,
                success: function (res) {// 请求成功，回调函数,data，指的就是服务器返回的数据
                    if (res.res) {
                        layer.msg(res.msg);
                        tb.reload();// 添加成功数据之后要重载表格
                        if (editOpen != undefined) {
                            layer.close(editOpen);
                        }
                    }
                },
                type: 'post',// ajax请求的方式，post或get
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //监听工具条
        table.on('tool(goodsTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var d = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            switch (layEvent) {
                case 'updateData':
                    editOpen = layer.open({// 弹框之后，如遇到select标签，radio,checkbox之类，需要使用表单渲染
                        type: 1,
                        title: "商品修改",
                        content: $("#editForm").html()
                    });
                    form.render();

                    $("#editUploadImg").click(function () {// 点击图片就触发这个file
                        $("#editPic").click();
                    });

                    $("#editPic").change(function () {
                        imgPreview(this.files[0], $("#editUploadImg")[0]);
                    });
                    $("#title").val(d.title);
                    $("#oldPrice").val(d.oldPrice);
                    $("#nowPrice").val(d.nowPrice);

                    $("#sureEdit")[0].goodsId = d.goodsId;
                    $("#editUploadImg").attr("src", d.img);
                    break;
                case 'deleteData':
                    layer.msg('删除');
                    break;
            }
        });


        table.on('edit(goodsTable)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据
        });
        //
        // // 监听行单击事件
        // table.on('row(goodsTable)', function (obj) {
        //     console.log(obj.tr) //得到当前行元素对象
        //     let trDom = obj.tr[0];// jsDom对象
        //     console.log(trDom.arr)
        //     layer.msg('单击事件')
        //     //obj.del(); //删除当前行
        //     //obj.update(fields) //修改当前行数据
        // });

        // 工具栏监听事件监听事件
        table.on('toolbar(goodsTable)', function (obj) {
            console.log(obj);
            // var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    addOpen = layer.open({// 弹框之后，如遇到select标签，radio,checkbox之类，需要使用表单渲染
                        type: 1,
                        title: "商品添加",
                        content: $("#addForm").html()
                    });
                    form.render();
                    $("#uploadImg").click(function () {// 点击图片就触发这个file
                        $("#pic").click();
                    });
                    $("#pic").change(function () {
                        imgPreview(this.files[0], $("#uploadImg")[0]);
                    });
                    break;
                case 'delete':
                    layer.msg('删除');
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
            }
            ;
        });
        table.on('checkbox(goodsTable)', function (obj) {
            console.log(obj); //当前是否选中状态
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });


        // tb.reload({
        //     where: {title: "商品"}
        // });// 表格重新加载


        //
        // let open = layer.open({// 就回返回一个index对象
        //     type: 1
        //     , title: "这个是一个信息框"
        //     , content: $("#div").html()
        //     , shadeClose: true // 这个是点击遮罩层是否关闭弹框
        // })

        // layer.confirm('您确定删除吗?', {icon: 3, title: '确定吗？'}, function (index) {
        //     //do something
        //     alert('执行ajax请求去删除数据');
        //
        //     layer.close(index);// 关闭某个弹框，传入弹框的下标
        // });

    });

</script>

<style>
    .testCls {
        color: red;
    }
</style>
</body>

</html>
